<template>
  <div class="announcement-board">
    <h1>公告栏</h1>
    <div class="announcement-list">
      <!-- 只展示状态为“已发布”的公告 -->
      <div v-for="(announcement, index) in limitedAnnouncements" :key="announcement.id" class="announcement-item">
        <div class="announcement-header">
          <span class="announcement-title">{{ announcement.title }}</span>
          <span class="announcement-date">{{ announcement.publishDate }}</span>
        </div>
        <div class="announcement-content" v-html="announcement.content"></div>
        <!-- 添加的控制按钮 -->
        <button @click="speak(announcement.content, announcement.id)">朗读</button>
        <button @click="pauseResume(announcement.id)">暂停/恢复</button>
        <label>
          速度:
          <input type="range" min="0.5" max="3" step="0.1" v-model="announcement.rate" @input="updateRateAndRestart(announcement)">
        </label>
        <label>
          音量:
          <input type="range" min="0" max="1" step="0.1" v-model="announcement.volume" @input="updateVolumeAndRestart(announcement)">
        </label>
      </div>
    </div>
    <!-- 查看更多按钮 -->
    <div v-if="filteredAnnouncements.length > 3 && !showAll" class="view-more">
      <el-button type="text" @click="showMore">查看更多</el-button>
    </div>
  </div>
</template>

<script>
import { listAnnouncement } from '@/api/announcement/permission';

export default {
  data() {
    return {
      loading: false,
      queryParams: {},
      announcementList: [], // 原始公告列表
      total: 0,
      showAll: false, // 是否显示全部公告
      utterances: {}, // 存储每个公告的SpeechSynthesisUtterance实例
    };
  },
  created() {
    this.getList(); // 组件创建时获取公告列表
  },
  computed: {
    filteredAnnouncements() {
      const published = this.announcementList.filter(item => item.status === '已发布');
      return published.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
    },
    limitedAnnouncements() {
      if (this.showAll) {
        return this.filteredAnnouncements;
      }
      return this.filteredAnnouncements.slice(0, 3);
    }
  },
  methods: {
    speak(text, id) {
      const msg = new SpeechSynthesisUtterance();
      const announcement = this.getAnnouncementById(id);
      msg.text = text;
      msg.rate = announcement.rate || 1;
      msg.volume = announcement.volume || 1;
      this.utterances[id] = msg; // 存储当前的utterance实例
      window.speechSynthesis.cancel(); // 取消所有正在进行的朗读
      window.speechSynthesis.speak(msg); // 开始朗读
    },
    pauseResume(id) {
      if (window.speechSynthesis.paused) {
        window.speechSynthesis.resume();
      } else {
        window.speechSynthesis.pause();
      }
    },
    updateRateAndRestart(announcement) {
      this.updateSettingsAndRestart(announcement, 'rate');
    },
    updateVolumeAndRestart(announcement) {
      this.updateSettingsAndRestart(announcement, 'volume');
    },
    updateSettingsAndRestart(announcement, setting) {
      const id = announcement.id;
      if (this.utterances[id]) {
        window.speechSynthesis.cancel(); // 取消当前朗读
        this.speak(announcement.content, id); // 根据新设置重新朗读
      }
    },
    getAnnouncementById(id) {
      return this.limitedAnnouncements.find(announcement => announcement.id === id);
    },
    getList() {
      this.loading = true;
      listAnnouncement(this.queryParams)
        .then(response => {
          this.announcementList = response.rows.map(item => ({
            ...item,
            rate: 1, // 默认速率
            volume: 1 // 默认音量
          }));
          this.total = response.total;
        })
        .catch(error => {
          console.error('获取公告列表失败:', error);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    showMore() {
      this.showAll = true;
    }
  }
};
</script>

<style scoped>
/* 示例样式 */
button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  margin-right: 5px;
}

button:hover {
  background-color: #40a9ff;
}

input[type="range"] {
  width: 100px;
  vertical-align: middle;
}
.announcement-board {
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-image: url('https://bpic.588ku.com/back_pic/06/11/93/036226bf26d5d85.jpg');
  background-size: cover;
  background-position: center;
}

.announcement-list {
  margin-top: 20px;
}

.announcement-item {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.announcement-title {
  font-weight: bold;
  font-size: 18px;
  color: #333;
}

.announcement-date {
  color: #666;
  font-size: 14px;
}

.announcement-content {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}

.view-mores {
  text-align: center;
  margin-top: 20px;
}

.view-more .el-button {
  color: #1890ff;
  font-size: 14px;
}

.view-more .el-button:hover {
  color: #40a9ff;
}
/* 示例样式 */
button {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

button:hover {
  background-color: #40a9ff;
}
</style>
